<template>
  <div class="app-container">
    <el-tabs class="tabs-container" v-model="activeName">
      <el-tab-pane name="affairBaseInfo" label="事项基本信息" class="tab-content">
        <affair-base-info ref="affairBaseInfo"/>
      </el-tab-pane>

      <el-tab-pane name="includeAffair" label="网点包含事项" class="tab-content">
        <branch-include-affair/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AffairBaseInfo from "./components/affairBaseinfo"
import BranchIncludeAffair from "./components/branchIncludeAffair"

export default {
  name: "Service",
  components: {
    AffairBaseInfo,
    BranchIncludeAffair
  },
  data() {
    return {
      activeName: 'affairBaseInfo'
    };
  },
  beforeRouteEnter(to, from, next) {
    const {serviceCode,isClickTag} = to.query;

    next(vm => {
      if(serviceCode && !isClickTag){
        vm.$refs.affairBaseInfo.resetQuery();
        vm.$refs.affairBaseInfo.autoFillServiceCode(serviceCode);
      }
    })
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  display: flex;
  width: 100%;
  min-height: inherit;

  .tabs-container {
    width: 100%;
  }

  ::v-deep .el-tabs__content {
    height: calc(100% - 55px);
  }

  .tab-content {
    width: 100%;
    height: 100%;
  }

}
</style>
